<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }">
        <el-menu :unique-opened="true" router :default-active="$route.path" background-color="#345" text-color="#bbb"
                 :style="{ height: '100vh' }"
                 :collapse="isCollapse" class="el-menu-vertical-demo">
          <el-menu-item> 
            <img width="30px" src="../assets/logo.svg" alt="">
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;百慕大影城后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title">
              首页
            </template>
          </el-menu-item>
          <el-submenu index="/home/movie">
            <template slot="title">
              <i class="el-icon-video-camera-solid"></i>
              <span slot="title">演员管理</span>
            </template>
            <el-menu-item index="/home/actor-list">
              <i class="el-icon-menu"></i>
              <span slot="title">演员列表</span>
            </el-menu-item>
            <el-menu-item index="/home/actor-add">
              <i class="el-icon-menu"></i>
              <span slot="title">新增演员</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse = true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse = false"></i>
          <!-- 面包屑 -->
          <el-breadcrumb separator="/" style="flex:1;margin-left:20px">
            <el-breadcrumb-item v-for="item in $route.meta.breadcrumbs" :key="item">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="right-menu" v-if="isShow">
            <el-dropdown class="avatar-container" trigger="click">
              <div class="avatar-wrapper">
                <img src="../assets/1.jpeg" class="user-avatar">
                <span class="name">{{user.nickname}}</span>
                <i class="el-icon-caret-bottom"/>
              </div>
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <router-link to="/home" style="text-decoration: none">
                  <el-dropdown-item>
                    首 页
                  </el-dropdown-item>
                </router-link>
                <el-dropdown-item divided>
                  <span style="display:block;" @click="logout">退 出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
           <div v-else>
             <span>未登录</span>
           </div>
        </el-header>
        
        <el-main>
          <!-- 二级路由站位符号 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { onUpdated } from 'vue';
export default {
  data() {
    return {
      isCollapse: false,
      isShow:true,
      user:{}
    }
  },
  methods: {
  logout(){
    window.sessionStorage.clear();
    this.$notify({
          title: '成功',
          message: '退出成功',
          type: 'success',
          duration:2000
        });
    this.$router.push("/login")
  }
  },
  //创建前，DOM还未创建
  beforeCreate(){},
  // 创建后，DOM已经创建完成
  created(){},
  // 挂载前，DOM创建完成了，还没有挂载
  beforeMount(){},
  //挂载后
  mounted() {
    this.user =JSON.parse(window.sessionStorage.getItem("user")) ;
    console.log(this.user,'this.user');
    console.log(this.$route.meta.breadcrumbs,"this.$$route.");
    
  },
  //更新前
  beforeUpdate(){},
  //更新后
  Updated(){},
  //销毁前
  beforeDestroy(){},
  //销毁后
 destroyed(){},
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  
  i {
    font-size: 1.3em;
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
  
  &:focus {
    outline: none;
  }
  
  .name {
    color: black;
    vertical-align: middle;
    margin-left: 5px;
  }
  
  
  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: black;
    vertical-align: text-bottom;
    
    &.hover-effect {
      cursor: pointer;
      transition: background .3s;
      
      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }
  }
  
  .avatar-container {
    margin-right: 30px;
    
    .avatar-wrapper {
      margin-top: 5px;
      position: relative;
      
      .user-avatar {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        vertical-align: middle;
        
      }
      
      .user-dropdown {
        color: blue;
      }
      
      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 23px;
        font-size: 12px;
        color: black;
      }
    }
  }
}
</style>
